<template>
  <div class="home-container">
    <el-container>
      <Sidebar />
      
      <el-main class="main-content">
        <el-card class="welcome-card">
          <div class="platform-header">
            <h1>在线教育平台</h1>
            <p class="subtitle">开启您的学习之旅</p>
          </div>
          
          <div class="action-buttons">
            <template v-if="!isLoggedIn">
              <el-button 
                type="primary" 
                size="medium" 
                @click="goToLogin"
                class="login-btn">
                <i class="el-icon-user"></i>
                登录
              </el-button>
              <el-button 
                type="success" 
                size="medium" 
                @click="goToRegister"
                class="register-btn">
                <i class="el-icon-user-solid"></i>
                注册
              </el-button>
            </template>
            <template v-else>
              <el-button 
                type="primary" 
                size="medium" 
                @click="goToDashboard"
                class="dashboard-btn">
                <i class="el-icon-s-platform"></i>
                进入学习
              </el-button>
            </template>
          </div>
          
          <div class="feature-section" v-if="!isLoggedIn">
            <h3>平台特色</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="feature-card">
                  <i class="el-icon-s-management feature-icon"></i>
                  <h4>丰富课程</h4>
                  <p>涵盖前端、后端、移动端等多种技术方向</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="feature-card">
                  <i class="el-icon-s-cooperation feature-icon"></i>
                  <h4>专业讲师</h4>
                  <p>行业资深专家亲自授课，深入浅出</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="feature-card">
                  <i class="el-icon-s-flag feature-icon"></i>
                  <h4>实战项目</h4>
                  <p>理论结合实践，掌握真实项目开发技能</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue'

export default {
  components: {
    Sidebar
  },
  computed: {
    isLoggedIn() {
      return !!localStorage.getItem('user')
    }
  },
  methods: {
    goToLogin() {
      this.$router.push('/login')
    },
    goToRegister() {
      this.$router.push('/register')
    },
    goToDashboard() {
      this.$router.push('/dashboard')
    }
  }
}
</script>

<style scoped>
.home-container {
  height: 100vh;
}

.main-content {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-card {
  width: 800px;
  text-align: center;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.platform-header h1 {
  color: #409EFF;
  margin-bottom: 10px;
  font-size: 36px;
}

.subtitle {
  color: #909399;
  margin-bottom: 40px;
  font-size: 18px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}

.login-btn, .register-btn, .dashboard-btn {
  width: 180px;
  height: 50px;
  font-size: 16px;
}

.el-icon-user, .el-icon-user-solid, .el-icon-s-platform {
  margin-right: 8px;
}

.feature-section {
  margin-top: 40px;
  text-align: left;
}

.feature-section h3 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
  font-size: 24px;
}

.feature-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 15px;
}

.feature-card h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #303133;
}

.feature-card p {
  color: #606266;
  text-align: center;
}
</style>